<template>
  <div class="jiaose">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">角色管理</div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="openadd()"
        >新增角色<el-icon><Plus /></el-icon
      ></el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" width="100" type="index" />
      <el-table-column label="角色名称" prop="name" width="250">
      </el-table-column>
      <el-table-column label="关联人数" prop="num"> </el-table-column>
      <el-table-column label="备注" prop="text" width="200"> </el-table-column>
      <el-table-column label="状态" prop="zhuangtai" width="200">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="changezhuangtai(scope.row.id, scope.row.flag)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
          <el-button @click="toquanxian" disabled>权限设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <el-dialog v-model="dialogVisible" title="新增角色" width="30%" @close="close()">
      <el-form
        :model="form"
        label-width="120px"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="角色名称:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="关联人数:" prop="num">
          <el-input v-model="form.num" />
        </el-form-item>
        <el-form-item label="状态:" prop="flag">
          <el-select
            v-model="form.flag"
            class="m-1"
            placeholder="请选择"
            size="large"
          >
            <el-option label="启用" :value="true" />
            <el-option label="禁用" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="form.text" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="add()"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import * as request from "@/api/gang/xitong";
import { useRouter } from "vue-router";
var $router = useRouter();
import { ref, onMounted } from "vue";
var tableData = ref([]);
var dialogVisible = ref(false);
var ruleFormRef = ref();
//规则
var rules = ref({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  num: [{ required: true, message: "请输入", trigger: "blur" }],
  flag: [{ required: true, message: "请输入", trigger: "blur" }],
});

var form = ref({
  name: "",
  flag: "",
  text: "",
  num: "",
});
//查询角色
onMounted(async () => {
  var res = await request.search_jiaose();
  console.log(res);
  tableData.value = res.data;
});
//跳转到权限设置
var toquanxian = () => {
  $router.push("/index/quanxian");
};
//打开新增弹框
var openadd = () => {
  dialogVisible.value = true;
};
//关闭弹框
var close=()=>{
  form.value = {}
}
//新增角色
var add = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      var res = await request.add_jiaose(form.value);
      console.log(res);
      ElNotification({
        title: "通知",
        message: "新增角色成功",
        type: "success",
        duration: 2000,
      });
      //关闭弹框
      dialogVisible.value = false;
      //新增成功重新渲染页面
      var res = await request.search_jiaose();
      tableData.value = res.data;
      //清空表单
      form.value = {};
    } else {
      ElNotification({
        title: "通知",
        message: "请检查输入信息",
        type: "error",
        duration: 2000,
      });
    }
  });
};
//删除角色
var handleDelete = async (id) => {
  var res = await request.del_jiaose(id);
  console.log(res);
  ElNotification({
    title: "通知",
    message: "删除角色成功",
    type: "success",
    duration: 2000,
  });
  var i = tableData.value.findIndex((item) => item.id == id);
  if (i != -1) {
    tableData.value.splice(i, 1);
  }
};
//修改角色状态
var changezhuangtai = async (id, flag) => {
  var res = await request.change_JSzhuangtai({ id, flag });
  console.log(res);
  ElNotification({
    title: "通知",
    message: "修改角色状态成功",
    type: "success",
    duration: 2000,
  });
};
</script>

<style scoped lang="scss">
.jiaose {
  width: 100%;
  .breadcrumb {
    font-size: 20px;
  }
  .title {
    margin: 20px 0;
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>